<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GeoJSON to Leaflet</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
	<link rel='stylesheet' type='text/css'  href='css/jquery.cursorMessage.css'/>
	<style type="text/css">
		#left{
			width: 700px;
			height: 500px;
			float:left;
		}
		#right{
			height: 500px;
			float:left;
			padding: 10px;
		}
		#right div{
			margin-bottom: 4px;
		}
		#map{
			height:100%;
		}
		#infoBox {
			width:300px;
		}
		
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
	<script type='text/javascript' src='js/jquery.cursorMessage.js'></script>
	<script type="text/javascript" src="geolocate-leaflet.js"></script>
	<script type="text/javascript">
	var map;
	function init() {
		map = new GeolocateLeaflet('map', {
			  zoom: 12
			, center : {lat : 39.74739, lng : -105 }
			, popup : false
			, style: {
				markerOptions: {
					icon: L.icon({
							iconUrl: './peak.png',
							iconSize: [32, 37],
							iconAnchor: [16, 37],
							popupAnchor: [0, -28]
							})
				},
				circleOptions: {
						stroke: true,
						color: '#03f',
						weight:	1,
						opacity: 0.5,
						fillColor: '#00ff00',
						fillOpacity: 0.2,
						clickable: true
					},
				polygonOptions: {
						color: '#03f',
						weight:	1,
						opacity: 0.5,
						fillColor: '#ffff00',
						fillOpacity: 0.2,
						clickable: true
					}
			}
		});
	}
	
	function showMap() {
		if($('#locality').val() == '' || $('#country').val() == '') {
			alert('locality and country should be provided');
		} else {
			var params = {};
			var properties = ['locality','country','state','county','language'];
			for(var i=0;i<properties.length;i++) {
				params[properties[i]] = $('#'+properties[i]).val();
			}
			properties = ['enableH2O','enableHwy','restrictToLowestAdm','enableUncert','doPoly','displacePoly'];
			for(var i=0;i<properties.length;i++) {
				params[properties[i]] = ($('#'+properties[i]).attr('checked') == 'checked') ? true : false;
			}
			map.query(params);
		}
	}
		
	function enableUncertaintyRadius() {
		map.enableUncertaintyRadius();
	}
		
	function disableUncertaintyRadius() {
		map.disableUncertaintyRadius();
	}
		
	function enableUncertaintyPolygon() {
		map.enableUncertaintyPolygon();
	}
		
	function disableUncertaintyPolygon() {
		map.disableUncertaintyPolygon();
	}
		
	</script>
</head>
<body onload="init();">
	<div id="left">
		<div id="map"></div>
		<div id="details"></div>
	</div>
	<div id="right">
		<div>
		<table>
		<tr><td>Locality String:</td><td><input type="text" id="locality" name="locality" value="bogalusa"></td></tr>
		<tr><td>Country:</td><td><input type="text" id="country" name="country" value="USA"></td></tr>
		<tr><td>State:</td><td><input type="text" id="state" name="state" value="LA"></td></tr>
		<tr><td>County:</td><td><input type="text" id="county" name="county"></td></tr>
		<tr><td>Match Water Body:</td><td><input id="enableH2O" type="checkbox" name="enableH2O" checked="checked" value="true" ></td></tr>
        <tr><td>Language:</td><td><select name="language" id="language">
			<option selected="selected" value="0">English</option>
			<option value="1">Spanish</option>
			<option value="2">Basque</option>
			<option value="3">Catalan</option>
			<option value="4">Galician</option>
		</select></td></tr>
		<tr><td>Detect Hwy/River Crossing:</td><td><input id="enableHwy" type="checkbox" name="enableHwy" checked="checked"></td></tr>
		<tr><td>Restrict to Lowest Adm. Unit:</td><td><input id="restrictToLowestAdm" type="checkbox" name="restrictToLowestAdm"></td></tr>
		<tr><td>Do Uncertainty:</td><td><input id="enableUncert" type="checkbox" name="enableUncert" checked="checked"></td></tr>
		<tr><td>Do Error Polygon:</td><td><input id="doPoly" type="checkbox" name="doPoly" checked="checked"></td></tr>
		<tr><td>Displace Polygon:</td><td><input id="displacePoly" type="checkbox" name="displacePoly"></td></tr>
		</table>
		</div>
		<div><input type="button" value="Locate" onclick="showMap();" /></div>
		<div><input type="button" value="Enable Uncertainty Radius" onclick="enableUncertaintyRadius();" /></div>
		<div><input type="button" value="Disable Uncertainty Radius" onclick="disableUncertaintyRadius();" /></div>
		<div><input type="button" value="Enable Uncertainty Polygon" onclick="enableUncertaintyPolygon();" /></div>
		<div><input type="button" value="Disable Uncertainty Polygon" onclick="disableUncertaintyPolygon();" /></div>
	</div>
</body>
</html>
